<template>
 <div>
    <div class="search">
     <input type="text" class="search-input" placeholder="输入城市名称或拼音" v-model="keyWord">
    </div>
    <div class="search-content" ref="search" v-show="keyWord">
      <ul>
        <li v-for="item of searchList" :key="item.id" 
        class="search-item border-bottom"  @click="cityBtn(item.name)">{{item.name}}</li>
        <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
      </ul>
    </div>
 </div>

</template>
<script>
  import Bscroll from 'better-scroll'
 export default {
   props:{
     cities:Object
   },
   data () {
     return {
       keyWord:"",
       searchList:[],
       timer:null
     }
   },
   computed:{
     hasNoData(){
       return !this.searchList.length
     }
   },
   mounted(){
     this.scroll=new Bscroll(this.$refs.search)
   },
   methods:{
      cityBtn(city){
           this.$store.commit("changeCity",city)
           this.$router.push("/")
       }
   },
   watch:{
     keyWord(){
       console.log(11111)
       if(this.timer){
         clearTimeout(this.timer)
       }
       if(!this.keyWord){
         this.searchList=[]
         return 
       }
       this.timer=setTimeout(()=>{
         const result=[]
         for(let i in this.cities){
            this.cities[i].forEach((item)=>{
              if(item.spell.indexOf(this.keyWord)>-1||item.name.indexOf(this.keyWord)>-1){
                result.push(item)
              }
            })       
         }
         this.searchList=result
       },100)
     }
   },
   components: {

   }
 }
</script>
<style lang="stylus" scoped>
    @import "~styles/varibles.styl"
    .search
      background $bgColor
      height .72rem
      padding 0 .1rem
      .search-input
        height 0.62rem
        box-sizing border-box
        padding 0 .1rem
        text-align center
        line-height 0.62rem
        width 100%
        border-radius:.06rem 
    .search-content 
      position absolute
      top 1.58rem
      bottom 0
      left 0
      right 0
      background #eee
      overflow hidden
      z-index 1
      .search-item
        color #666
        background #fff
        line-height .62rem
        padding-left .2rem

</style>
